<template>
    <div class="main">
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="商品名称">
                    <el-input v-model="page.name" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="商家名称">
                    <el-input v-model="page.merchantName" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-cascader v-model="page.type" :options="classificationListData" :props="propsData" clearable
                        @change="changeType" :show-all-levels="false" />
                </el-form-item>
                <el-form-item label="销售状态">
                    <el-select v-model="page.saleStatus" placeholder="请选择">
                        <el-option label="售卖中" value="售卖中" />
                        <el-option label="仓库中" value="仓库中" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addModify">添加商品</el-button>
            <el-table :data="tableData" style="width: 100%" max-height="580px"
                @selection-change="handleSelectionChange">
                <el-table-column type="index" width="50" />
                <el-table-column label="商品图片" align="center">
                    <template #default="scope">
                        <img v-if="scope.row.photo.length > 0" :src="scope.row.photo[0]" alt=""
                            style="width: 80px; height: 80px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" align="center" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="sellingPrice" label="价格" align="center" width="120">
                    <template #default="scope">
                        <p>用户价格：{{ scope.row.merchandiseInventory }}</p>
                        <p>供应商价格：{{ scope.row.merchandiseInventory }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="库存/销量" align="center">
                    <template #default="scope">
                        <p>库存：{{ scope.row.merchandiseInventory }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center">
                    <template #default="scope">
                        <p>{{ scope.row.type }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center">
                    <template #default="scope">
                        <p>{{ scope.row.type }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="商家名称" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <p>{{ scope.row.saleStatus }}</p>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="addEdiClick(2, scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
    <!-- 新增修改 -->
    <el-dialog v-model="dialogVisible" title="查看详情" width="1200px" :before-close="handleClose" top="1vh">
        <Add v-if="dialogVisible" :rowData="rowData" @OKdata="OKdata" :isAdd="isAdd" />
    </el-dialog>
</template>

<script setup>
import Add from './add.vue' // 引入组件
import { onMounted, reactive, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { getProductList, productListDelete, classificationList } from '@/api/goods.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const classificationListData = ref([])
// 分类
// 多选下拉框
const propsData = { label: 'name', children: 'children', value: 'name' }
const getclassificationList = () => {
    let par = {
        name: "",
        pageNum: 1,
        pageSize: 30
    }
    classificationList(par).then(res => {
        if (res.code == 200) {
            classificationListData.value = res.data

        }
    })
}
// 基础设置-商品分类
const changeType = (data) => {
    page.type = data[data.length - 1]
}
const dialogVisible = ref(false)
const page = reactive({
    name: "",
    merchantName: "",
    type: "",
    saleStatus: "",
    status: '',
    pageNum: 1,
    pageSize: 10,
})
const total = ref(0)
const tableData = reactive([])
const multipleSelection = ref([])
const rowData = ref({})
const productType = reactive([
    {
        name: '核销商品',
        value: '核销商品'
    },
    {
        name: '实物商品',
        value: '实物商品'
    },
    {
        name: '卡密商品',
        value: '卡密商品'
    },
    {
        name: '团购商品',
        value: '团购商品'

    },
    {
        name: '礼包商品',
        value: '礼包商品'
    },
    {
        name: '票务商品',
        value: '票务商品'
    },
    {
        name: '虚拟商品',
        value: '虚拟商品'
    }

])
const isAdd = ref(false)

// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.name = "";
    page.merchantName = '';
    page.type = '';
    page.status = '';
    page.saleStatus = '';
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    getList()
}
// 弹框保存
const OKdata = () => {
    dialogVisible.value = false
    getList()
}
// 弹框关闭
const handleClose = () => {
    dialogVisible.value = false
    getList()
}
// 查看
const addEdiClick = (num, row) => {
    dialogVisible.value = true
    rowData.value = row
    isAdd.value = false
}
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 新增修改
const addModify = () => {
    dialogVisible.value = true
    rowData.value = {}
    isAdd.value = true
}
// 删除
const deleteData = (row) => {
    ElMessageBox.confirm(
        '是否删除该条数据?',
        '删除',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            productListDelete(row.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getList()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
onMounted(() => {
    getList()
    getclassificationList()
})
// 获取列表
const getList = () => {
    tableData.length = 0
    total.value = 0
    getProductList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    width: 100%;
    min-width: 1000px;
    word-wrap: normal;

    ::v-deep .el-date-editor {
        width: 330px !important;
    }

    ::v-deep(.el-select__wrapper) {
        width: 150px;
    }
}


.dialog-footer button:first-child {
    margin-right: 10px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>